<template>
	<view>
		<view class="m-banner">
			<u-swiper :list="listBanner" mode="rect" :height="750"></u-swiper>
		</view>
		<view class="m-title">
			<text>{{info.title || ''}}</text>
		</view>
		<view class="m-price-view">
			<text class="m-price">{{info.price_sale || 0}}</text>
		</view>
		<view class="m-cell" v-if="info.inventorys.length > 0" @click="show = true">
			<view class="m-cell-left">
				<text>规格</text>
			</view>
			<view class="m-cell-right">
				<text>{{info.key_vals || ''}}</text>
				<image src="../static/shop/icon-right.png" mode=""></image>
			</view>
		</view>
		<view class="grap"></view>
		<view class="m-h3">
			<text>商品详情</text>
		</view>
		<view class="m-html">
			<u-parse :html="info.content || ''"></u-parse>
		</view>
		
		<view class="m-bottom-empty safe-area-inset-bottom">
			
		</view>
		<view class="m-bottom safe-area-inset-bottom">
			<!-- <view class="m-bottom-item">
				<image src="../static/shop/shop-goods-home.png" mode=""></image>
				<text>商城</text>
			</view>
			<button class="m-bottom-item" open-type="contact">
				<image src="../static/shop/shop-goods-kefu.png" mode=""></image>
				<text>客服</text>
			</button>
			<view class="m-bottom-item">
				<u-badge type="error" :count="carCount" :offset="[-10,20]"></u-badge>
				<image src="../static/shop/shop-goods-cart.png" mode=""></image>
				<text>购物车</text>
			</view>
			<view class="m-bottom-btn" @click="show = true">
				<text>加入购物车</text>
			</view> -->
			<view class="m-bottom-btn"  @click="show = true" style="background: #DE2C38;">
				<text>立即兑换</text>
			</view>
		</view>
		
		<u-popup v-model="show" mode="bottom" :borderRadius="20" :closeable="true">
			<view class="m-popup">
				<view class="m-info">
					<view class="m-info-image">
						<image :src="listBanner[0]" mode=""></image>
					</view>
					<view class="m-info-content">
						<view class="m-info-title u-line-2">
							<text>{{info.title || ''}}</text>
						</view>
						<view class="u-m-t-15">
							<text class="m-info-price">{{info.price_sale || 0}}</text>
						</view>
					</view>
				</view>
				<block v-if="info.inventorys.length > 0">
					<view class="m-popup-title">
						<text>规格</text>
					</view>
					<view class="m-list">
						<view class="m-item" @click="clickSpecFun(item)"  :class="{'m-item-active':item.is_selected == 1}" v-for="(item,index) in info.inventorys" :key="index">
							<text>{{item.key_vals}}</text>
						</view>
					</view>
				</block>
				
				<view class="m-popup-title" style="padding-top: 40rpx;">
					<text>数量</text>
					<m-number-box v-model="num" :min="1" bgColor="#fff"></m-number-box>
				</view>
				<view class="m-popup-bottom safe-area-inset-bottom">
					<!-- <view class="m-popup-bottom__btn" @click="toCarFun">
						<text>加入购物车</text>
					</view> -->
					<view class="m-popup-bottom__btn m-popup-bottom__btn2" @click="toBuyFun">
						<text>立即兑换</text>
					</view>
				</view>
			</view>
		</u-popup>
		<m-login></m-login>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				inventoryId:'',
				listBanner: [],
				info:{inventorys:[]},
				show:false,
				num:1,
				carCount:0,
			}
		},
		onLoad(opt) {
			this.inventoryId = opt.id
			this.getInfoFun()
			this.getCarFun()
		},
		methods: {
			clickSpecFun(item){
				if(item.inventoryId == this.inventoryId) return false;
				this.inventoryId = item.inventoryId
				this.getInfoFun()
			},
			getInfoFun(){
				this.$http.getJson('product_detail',{inventoryId:this.inventoryId}).then(res=>{
					if(res.code == 1){
						let info = res.data
						this.listBanner = info.images || []
						this.info = info
					}
				})
			},
			getCarFun(){
				if(!this.isLogin()) return false;
				this.$http.getJson('gouwuche_lists').then(res=>{
					if(res.code == 1){
						let count = 0
						if (res.data.length > 0) {
							res.data.forEach(item=>{
								count += Number(item.num)
							})
						} 
						this.carCount = count
					}
				})
			},
			toCarFun(){
				this.loginCallback(()=>{
					this.$http.getJson('gouwuche_add',{inventoryId:this.inventoryId,num:this.num}).then(res=>{
						this.$m.msg(res.message)
						if(res.code == 1){
							this.carCount = res.count
						}
					})
				})
			},
			toBuyFun(){
				this.loginCallback(()=>{
					if(Number(this.info.kucun) == 0){
						this.$m.msg('库存不足')
						return false;
					}
					let product_info = [{
						"inventoryId": this.info.inventoryId,
						"productId": this.info.productId,
						"num": this.num,
					}]
					let list = [
						{
							image: this.info.images[0],
							title: this.info.title,
							key_vals:this.info.key_vals,
							price_sale: this.info.price_sale,
							num: this.num
						}
					]
					uni.setStorageSync('orderCreateInfo',list)
					this.to_link('/pages2/shop-confirm/shop-confirm?product_info='+JSON.stringify(product_info))
				})
			},
		}
	}
</script>

<style lang="scss">
.m-title{
	font-size: 28rpx;
	color: #34302D;
	padding: 28rpx 25rpx 0;
	line-height: 40rpx;
	font-weight: 600;
}
.m-price-view{
	padding: 10rpx 25rpx 27rpx;
	.m-price{
		font-size: 40rpx;
		color: #DE2C38;
		&::after{
			content: '积分';
			font-size: 24rpx;
			color: #76706B;
			margin-left: 5rpx;
		}
	}
}
.m-cell{
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-left: 25rpx;
	border-top: 1px solid #E6E3DE;
	width: 700rpx;
	height: 100rpx;
	.m-cell-left{
		font-size: 28rpx;
		color: #34302D;
		font-weight: 800;
	}
	.m-cell-right{
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #75706A;
		image{
			width: 30rpx;
			height: 30rpx;
			margin-left: 10rpx;
		}
	}
}
.grap{
	width: 100%;
	height: 20rpx;
	background: #F6F6F6;
}
.m-h3{
	padding: 30rpx 25rpx;
	font-size: 28rpx;
	color: #34302D;
	font-weight: 600;
}
.m-html{
	padding:0 25rpx 25rpx;
}
.m-bottom-empty{
	width: 100%;
	height: 110rpx;
	box-sizing: content-box;
}
.m-bottom{
	position: fixed;
	bottom: 0;
	box-sizing: content-box;
	display: flex;
	align-items: center;
	width: 750rpx;
	height: 110rpx;
	background: #FFFFFF;
	box-shadow: 0rpx -6rpx 10rpx 1rpx rgba(191,159,112,0.12);
	.m-bottom-btn{
		display: flex;
		justify-content: center;
		align-items: center;
		flex: 1;
		height: 110rpx;
		background: #D3A358;
		font-size: 30rpx;
		color: #fff;
	}
	.m-bottom-item{
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 116rpx;
		font-size: 24rpx;
		color: #9B958F;
		line-height: 33rpx;
		background: transparent;
		image{
			width: 34rpx;
			height: 34rpx;
			margin-bottom: 10rpx;
		}
	}
	button{
		&::after{
			border: 0;
		}
	}
}

.m-popup{
	.m-info{
		display: flex;
		padding: 40rpx 25rpx 0;
		.m-info-image{
			width: 180rpx;
			height: 180rpx;
			flex-shrink: 0;
			image{
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.m-info-content{
			margin-left: 30rpx;
			.m-info-title{
				width: 400rpx;
				font-size: 30rpx;
				color: #34302D;
				line-height: 42rpx;
			}
			.m-info-price{
				font-size: 40rpx;
				color: #DE2C38;
				&::after{
					content: '积分';
					font-size: 24rpx;
					margin-left: 5rpx;
					color: #76706B;
				}
			}
		}
	}
	
	.m-popup-title{
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 28rpx;
		color: #34302D;
		font-weight: 800;
		padding: 80rpx 25rpx 25rpx;
	}
	.m-list{
		display: flex;
		flex-wrap: wrap;
		padding-left: 25rpx;
		.m-item{
			display: flex;
			justify-content: center;
			align-items: center;
			min-width: 150rpx;
			height: 48rpx;
			padding: 0 10rpx;
			background: #FFFFFF;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1px solid #E6E3DE;
			font-size: 24rpx;
			color: #9A958F;
			margin-right: 20rpx;
			margin-bottom: 20rpx;
		}
		.m-item-active{
			background: #D3A358;
			border-color: #D3A358;
			color: #fff;
		}
	}
	
	.m-popup-bottom{
		margin-top:80rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 750rpx;
		height: 120rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		box-shadow: 0rpx -4rpx 10rpx 1rpx rgba(0,0,0,0.06);
		.m-popup-bottom__btn{
			display: flex;
			justify-content: center;
			align-items: center;
			width: 710rpx;
			height: 104rpx;
			background: #D3A358;
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			font-size: 32rpx;
			color: #FFF7EF;
		}
		.m-popup-bottom__btn2{
			background: #DE2C38;
			// margin-left: 20rpx;
		}
	}
}
</style>